<template>
  <div id="app" class="fixed-warp-body">
    <nav-bar title="申请退款" left-arrow @clickLeft="$goPageBack('order/list')" />
    <div v-if="data">
      <div class="panel-box mg-all">
        <div class="panel-head">
          {{data.product_name}}
        </div>
        <ul class="panel-list">
          <li>
            <van-row>
              <van-col span="7" class="title">价格套餐</van-col>
              <van-col span="17" class="text-right">{{data.sku_name || '-'}}</van-col>
            </van-row>
          </li>
          <li>
            <van-row>
              <van-col span="7" class="title">退款数量</van-col>
              <van-col span="17" class="text-right">
                <template v-if="limit_kind === 2">
                  {{data.can_refund_num}}
                </template>
                <van-stepper
                  v-else
                  v-model="qty"
                  :min="1"
                  :max="data.can_refund_num"
                  integer
                />
              </van-col>
            </van-row>
          </li>
          <li class="font-sm">
            <van-row>
              <van-col span="10" class="c-warn">{{limitText}}</van-col>
              <van-col span="7" class="text-right">产品总价：</van-col>
              <van-col span="7" class="text-right">￥{{data.sale_price||0}}×{{qty||0}}</van-col>
            </van-row>
          </li>
          <li class="font-sm">
            <van-row>
              <van-col span="17" class="text-right">手续费：</van-col>
              <van-col span="7" class="text-right">￥{{fee_unit||0}}×{{qty||0}}</van-col>
            </van-row>
          </li>
        </ul>
        <div class="panel-foot font-lg">
          <van-row>
            <van-col span="17" class="text-right">退款合计：</van-col>
            <van-col span="7" class="text-right c-buy"><span class="font-sm">￥</span>{{amount||0}}</van-col>
          </van-row>
        </div>
      </div>

      <div class="panel-box mg-all">
        <div class="panel-head">
          退款原因
        </div>
        <div class="panel-body">
          <van-radio-group v-model="checkedReason">
            <van-radio v-for="item in kindList" :key="item.name" :name="item.name">{{item.name}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="fixed-warp">
        <van-button type="buy" size="large" @click="submit">申请退款</van-button>
      </div>
    </div>
    <no-data :text="errMsg" v-else-if="!isOnLoading" />
    <slogan class="mg-footer" />
  </div>
</template>

<script>
  import {
    Icon,
    Button,
    Row,
    Col,
    Stepper,
    Radio,
    RadioGroup,
    Toast,
  } from 'vant'

  import NavBar from "@cmpt/header/navbar"
  import Slogan from '@cmpt/slogan'
  import NoData from '@cmpt/no-data'

  import {
    getRefundSubmitInfo,
    getRefundfee,
    submitRefund,
  } from "@api/modules/order"
  import {
    getErrInfo,
  } from "@api/http"
  import {
    REFUND_USER_REASON_LIST,
    REFUND_LIMIT_LIST,
  } from '@data/dic/order'

  export default {
    name: 'refund',
    components: {
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Stepper.name]: Stepper,
      [Radio.name]: Radio,
      [RadioGroup.name]: RadioGroup,

      NavBar,
      Slogan,
      NoData,
    },

    data() {
      return {
        // 路由数据
        order_no: this.$getUrlParam('order_no') || '',
        sku_id: this.$getUrlParam('sku_id') || '',
        // 页面展示数据
        data: null,
        kindList: REFUND_USER_REASON_LIST, // 退款原因
        limit_kind: 0, // 限制退款次数
        limitText: '',
        // 表单数据
        qty: 1,
        checkedReason: '',
        amount: 0, // 实际可退款金额
        fee: 0, // 退款手续费（总价）
        fee_unit: 0, // 退款手续费（单价）
        // 提示数据
        errMsg: '',
        isOnLoading: false,
        isOnLoadingFee: false,
      }
    },

    watch: {
      data: {
        handler(data) {
          const limit_kind = (data || {}).refund_limit_kind || 0
          this.limit_kind = limit_kind
          if (this.limit_kind) {
            const obj = REFUND_LIMIT_LIST.find((item) => {
              return item.key == limit_kind
            }) || {}
            this.limitText = obj.name || ''
            // 一次全退
            if (limit_kind === 2) {
              this.qty = this.data.can_refund_num
            }
          }
          else {
            this.limitText = ''
          }
        },
        deep: true
      },

      qty: {
        handler(qty) {
          this.getFee()
        },
        immediate: true,
      },
    },

    methods: {
      async getData() {
        this.isOnLoading = true
        Toast.loading({
          duration: 10000,
          forbidClick: true
        })
        getRefundSubmitInfo({
          order_no: this.order_no,
          sku_id: this.sku_id,
        }).then(res => {
          this.isOnLoading = false
          Toast.clear()
          this.data = res.data
        }).catch(err => {
          this.data = null
          const {
            msg
          } = getErrInfo(err)
          this.errMsg = msg
          this.isOnLoading = false
        })
      },

      async getFee() {
        Toast.loading({
          duration: 10000,
          forbidClick: true
        })
        this.isOnLoadingFee = true
        getRefundfee({
          order_no: this.order_no,
          sku_id: this.sku_id,
          qty: this.qty,
        }).then(res => {
          this.isOnLoadingFee = false
          Toast.clear()
          const data = res.data
          this.amount = data.refund_amount
          this.fee = data.refund_fee
          this.fee_unit = data.refund_fee_unit
        }).catch(err => {
          this.isOnLoadingFee = false
        })
      },

      async submit() {
        if (!this.checkedReason && this.checkedReason !== 0) {
          Toast('请选择退款原因')
          return
        }
        if (this.isOnLoadingFee) {
          Toast('正在计算运费，请稍后')
          return
        }
        Toast.loading({
          duration: 10000,
          forbidClick: true
        })

        submitRefund({
          order_no: this.order_no,
          sku_id: this.sku_id,
          qty: this.qty,
          amount: this.amount,
          fee: this.fee,
          reason: this.checkedReason,
          refund_kind: 1, // 用户申请退款
        }).then(res => {
          this.$goPage('refund/detail', {
            id: res.data.refund_id
          }, true)
          Toast.clear()
        }).catch(err => {})
      },

    },

    created() {
      this.getData()
    },
  }
</script>

<style lang="less" src="@style_m/components/panel.less"></style>
<style lang="less" src="@style_m/mod/order-detail.less"></style><
